import list from './js/data.js';
import './css/index.css';
// 图片列表
let ul = document.querySelector('.content > ul');
// gif
let loading = document.querySelector('.loading');
// 要展示的数据
let pageData = [];
// 截取开始坐标
let startIndex = 0;
// 截取结束坐标
let endIndex = 8;

// 初始化数据
showData();

// 显示数据
function showData() {
  // 要显示的数据
  pageData = list.slice(startIndex, endIndex);
  // 定义字符串变量
  let str = '';
  // 数组遍历渲染图片
  pageData.forEach((item) => {
    str += `
      <li>
        <img src="${item.pic}" alt="" />
        <p>${item.name}</p>
        <p>城市: ${item.city}</p>
        <p>地址: ${item.address}</p>
        <p>价格: ${item.price}</p>
        <p>演出时间: ${item.showTime}</p>
      </li>
        `;
  });
  ul.innerHTML += str;
  // 截取开始坐标
  startIndex = endIndex;
  // 截取结束坐标
  endIndex += 4;
}

//

window.addEventListener('scroll', () => {
  if (
    document.documentElement.scrollTop +
      document.documentElement.clientHeight ==
    document.documentElement.scrollHeight
  ) {
    console.log('到底了');
    if (startIndex < list.length) {
      loading.classList.add('active');
      setTimeout(() => {
        showData();
        loading.classList.remove('active');
      }, 2000);
    } else {
      return;
    }
  }
});
